<template>
  <el-form :model="formData" label-width="120px">
    <div v-if="loginType==0">
      <el-row>
        <el-col :span="24">
          <el-input v-model="formData.cloud_name"
                    prefix-icon="UserFilled"
                    placeholder="请输入用户名或手机号" size="large"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-input v-model="formData.cloud_passwd"
                    type="password"
                    placeholder="请输入用户密码"
                    prefix-icon="unlock"
                    size="large"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <ImageValid ref="imageValidCode" v-model:value="formData.imageCode" :openCaptcha="openCaptcha"
                      @keyup.enter="loginEvent"></ImageValid>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-button type="primary" size="default" style="width:100%" :loading="loading" @click="loginEvent">登入
          </el-button>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
defineOptions({
  name: "FormLoginModal"
});
//定义组件名称
// @ts-ignore
import ImageValid from "@/components/global/ImageValid/ImageValid.vue";
// @ts-ignore
import {cmdSM2Encrypt} from "@/components/global/sm2/index";
// @ts-ignore
import {onMounted, reactive, ref, getCurrentInstance} from 'vue'

//登入类型: 0: 默认登入 1: 短信登入 2: 扫码登入
const loginType = ref(0);

// @ts-ignore
const {proxy} = getCurrentInstance()

let formData = reactive({
  cloud_name: 'admin',
  cloud_passwd: 'Admin@2022',
  imageCode: ''
});
let loading = ref(false);

const imageValidCode = ref<any>(null);

let sm2PublicKey = "";

//是否开启验证码
let openCaptcha = ref<any>(false);
/**
 * 加载动态加密值
 */
onMounted(() => {
  proxy.$http.postNoAuth('/cloud/oauth/conf', {}).then((res: any) => {
    openCaptcha.value = res.data.open_captcha;
    sm2PublicKey = res.data.PublicKey;
    if (proxy.$store.state.flushPage && (proxy.$store.state.Authorization && proxy.$store.getters.token)) {
      proxy.$store.dispatch('flushPage',false);
      proxy.$router.push("/");
    }
  });
});

/**
 * 登入
 */
function loginEvent() {
  loading.value = true;
  if (imageValidCode.value.compareCode()) {
    cmdSM2Encrypt(formData.cloud_passwd, sm2PublicKey).then((password) => {
      proxy.$http.postNoAuth('/oauth/token', {
        username: formData.cloud_name,
        password: password,
        client_id: 'cloud',
        grant_type: 'captcha',
        client_secret: '4FBFDFB96DD576B65BBE',
        captcha: formData.imageCode
      }).then((res: any) => {
        proxy.$store.dispatch('setToken', res.access_token);
        proxy.$store.dispatch('refreshToken', res.refresh_token);
        setTimeout(function () {
          loading.value = false;
          proxy.$router.go(0)
        }, 1000);
      }).catch((err: any) => {
        console.log(err);
        loading.value = false;
      });
    });
  } else {
    loading.value = false;
  }
}
</script>

<style scoped>

</style>